<template>
    <el-dialog v-model="open" :title="`${title}管理员`" append-to-body width="550px" :before-close="cancel">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
            <el-form-item prop="name" label="姓名">
                <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item prop="sort" label="排序">
                <el-input v-model="form.sort" type="number" placeholder="请输入排序" />
            </el-form-item>
            <el-form-item prop="type" label="类型">
                <el-radio-group v-model="form.type">
                    <el-radio v-for="(v, k) in typeEnum" :label="Number(k)" :key="k" :value="Number(k)">{{ v }}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="text-center">
                <el-button :loading="loading" @click="cancel">取消</el-button>
                <el-button :loading="loading" type="primary" @click="handleSubmit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { addIndustry, editIndustry } from '@/api/industryManage';
import { typeEnum } from '@/utils/enum';
const { proxy } = getCurrentInstance()
const props = defineProps({ getList: { type: Function } })
const title = ref('添加')
const open = ref(false)
const loading = ref(false)
const data = reactive({
    form: {
        type: 1
    },
    rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
    }
})
const { form, rules } = toRefs(data)
function handleSubmit() {
    proxy.$refs['formRef'].validate(valid => {
        if (valid) {
            const reqForm = JSON.parse(JSON.stringify(form.value))
            const reqApi = reqForm.id ? editIndustry : addIndustry
            loading.value = true
            reqApi(reqForm).then(res => {
                if (res.code == 0) {
                    cancel()
                    proxy.$modal.msgSuccess('操作成功！')
                    props.getList && props.getList()
                }
            }).finally(() => loading.value = false)
        }
    })
}
function openDialog(data) {
    open.value = true
    form.value = data.row
    title.value = data.title
}

function cancel(data) {
    open.value = false
    form.value = {}
}
defineExpose({ openDialog })
</script>

<style lang="scss" scoped></style>